<template>
	<view class="addcourse">
		<view class="content">
			<uni-forms labelPosition="top" :rules="rules" v-model="formData" ref="formRef">
				<uni-forms-item label="课程名称" name="title">
					<uni-easyinput placeholder="请输入课程名称" v-model="formData.title"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="课程封面" name="cover">
					<uni-file-picker limit="1" @select="chooseImg" @delete="formData.cover=''" return-type="object" :value="img"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="课程分类" name="subjectId">
					<uni-data-picker v-model="formData.subjectId" :localdata="subjectList" @change="onchange"
						popup-title="请选择课程分类" placeholder="请选择课程分类"></uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="课程价格" name="price">
					<uni-easyinput type="number" placeholder="请输入课程价格" v-model="formData.price"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="课程简介" name="remark">
					<uni-easyinput placeholder="请输入课程简介" v-model="formData.remark"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="总课时" name="lessonNum">
					<uni-easyinput placeholder="请输入课程时长" v-model="formData.lessonNum" type="number"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="课程描述" name="description">
					<uni-easyinput placeholder="请输入课程描述" v-model="formData.description" type="textarea"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</view>
		<button type="primary" @click="next">下一步</button>
	</view>
</template>
<script setup>
	import {
		getSubject
	} from '../../apis/course.js'
	const img = ref({
		name:'',
		extname:'',
		url:''
	})
	const subjectList = ref([])
	const formRef = ref(null)
	const formData = ref({
		title: '',
		cover: '',
		subjectId: '',
		price: '',
		remark: '',
		description:'',
		lessonNum: ''
	})
	const rules = {
		title: {
			rules: [{
				required: true,
				errorMessage: '请输入课程名称'
			}]
		},
		cover: {
			rules: [{
				required: true,
				errorMessage: '请上传课程封面'
			}]
		},
		subjectId: {
			rules: [{
				required: true,
				errorMessage: '请选择课程分类'
			}]
		},
		price: {
			rules: [{
				required: true,
				errorMessage: '请输入课程价格'
			}]
		},
		remark: {
			rules: [{
				required: true,
				errorMessage: '请输入课程简介'
			}]
		},
		description: {
			rules: [{
				required: true,
				errorMessage: '请输入课程描述'
			}]
		},
		lessonNum: {
			rules: [{
				required: true,
				errorMessage: '请输入总课时'
			}]
		}
	}
	const list = async (pageNum, pageSize) => {
		const res = await getSubject(pageNum, pageSize)
		res.data.data.records.forEach(item => {
			item.text = item.title
			delete item.title
			item.value = item.id
			delete item.id
			item.children.forEach(item => {
				item.text = item.title
				delete item.title
				item.value = item.id
				delete item.id
			})
		})
		subjectList.value = res.data.data.records
	}
	const value = ref('')
	const onchange = (e) => {
		console.log(e)
	}
	list(1, 10)
	const chooseImg = (e) => {
		console.log(e)
		uni.uploadFile({
			url: 'http://172.16.7.75:82/teacher/upload',
			filePath: e.tempFilePaths[0],
			name: 'file',
			success: (res) => {
				console.log(res)
				const url=JSON.parse(res.data).data
				img.value.url=url
				formData.value.cover=url
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}
	const next = () => {
		formRef.value.validate().then(()=>{
			console.log("表单校验成功")
			uni.navigateTo({
				url:'/pages/teacher/uploadVideo?formData='+JSON.stringify(formData.value)
			})
		}).catch(()=>{
			uni.showToast({
				title:'请填写完整信息',
				icon:'error'
			})
		})
	}
	
</script>
<style lang="scss" scoped>
	.addcourse {
		background:
			linear-gradient(to bottom, transparent, #fff),
			linear-gradient(to right, #beecd8, #F4E2D8);
		min-height: 100vh;
		padding: 50rpx 30rpx;

		.content {
			background: white;
			border-radius: 20rpx;
			padding: 30rpx;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
			margin-bottom: 50rpx;
		}
	}
</style>